<template>
    <header class="vm-header-container">
        <span v-if="goBack" class="mint-button-icon" @click="$router.back(-1)">
          <i class="mintui mintui-back"></i>
          返回
        </span>
        <router-link to="login" class="login" id="login" v-if="isShowLogin"></router-link>
        <h6>{{ pageTitle }}</h6>
        <router-link to="message" class="message" id="message" v-if="showMessage"></router-link>
        <slot name="modify"></slot>
    </header>
</template>

<script>

export default {
  name: 'vm-common-header',
  data () {
    return {
      isShowLogin: this.showLogin
    }
  },
  props: ['goBack', 'pageTitle', 'showLogin', 'showMessage'],
  created() {
    let userData = JSON.parse(window.localStorage.getItem('userData'));
    if (userData) {
      this.isShowLogin = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.vm-header-container {
    width: 100%;
    height: 128px;
    padding-top: 40px;
    background-color: #4b9af3;
    // background: url('../../static/images/page_header.jpg') no-repeat;
    background-size: cover;
    z-index: 99999;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    .mint-button-icon  {
      position: absolute;
      font-size: 30px;
      margin-left: 20px;
      color: #fff;
      .mintui.mintui-back {
        font-size: 30px;
        color: #fff;
      }
    }

    .login {
        position: absolute;
        top: 0;
        left: 0;
        width: 44px;
        height: 90px;
        margin-left: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            background: url('../../static/images/mv_Spirit.png') no-repeat;
            background-size:881px 1149px;
            background-position: -4px -176px;
        }
    }
    h6 {
        font-size: 32px;
        color: #fff;
        font-weight: 200;
        width: 100%;
        flex: 1;
    }
    .message {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 90px;
        margin-right: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            background: url('../../static/images/mv_Spirit.png') no-repeat;
            background-size:881px 1149px;
            background-position: -4px -132px;
        }
    }
}
</style>

